<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>bilibili</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="nav-box">
        <div class="cover">
            
        </div>
          <div class="navigation-wrapper">
                  <div class="left">
                    <ul>
                        <li>
                               <a href="">首页</a>
                        </li>
                        <li>
                            <a href="">直播</a>
                        </li>
                         <li>
                        <a href="">游戏中心</a>
                         </li>
                        <li>
                         <a href="">会员购</a>
                         </li>
                        <li>
                        <a href="">漫画</a>
                        </li>
                         <li>
                         <a href="">赛事</a>
                         </li>
                          <li>
                         <a href="">看诺奖</a>
                         </li>
                      <li>
                         <a href="">下载客户端</a>
                        </li>
                </ul>
                  </div>
                  <div class="center">
                    <input type="text" placeholder="刺客五六七第五季">
                    <img src="search.svg">
                  </div>
                  <div class="right">
                    <div class="login">登录</div>
                    <div class="right-center">
                        <ul>
                            <li>
                                <img src="email.png">
                                <span>大会员</span>
                            </li>
                            <li>
                                <img src="email.png">
                                <span>消息</span>
                            </li> <li>
                                <img src="email.png">
                                <span>动态</span>
                            </li> <li>
                                <img src="email.png">
                                <span>收藏</span>
                            </li> <li>
                                <img src="email.png">
                                <span>历史</span>
                            </li> <li>
                                <img src="email.png">
                                <span>创作</span>
                            </li>
                        </ul>
                    </div>
                    <div class="up">
                        <img src="下载.png">
                        <span>投稿</span>
                    </div>
                  </div>
          </div>
          <img src="logo.png" class="logo">
    </div>
    <div class="content-box">
        <div class="column">
            <div class="column-left">
                <ul>
                    <li>
                        <div class="icon1"></div>
                        <span>动态</span>
                    </li>
                    <li>
                        <div class="icon2"></div>
                        <span>热门</span>
                    </li>
                </ul>
            </div>
            <div class="column-center">
                <ul>
                    <li>番剧</li>
                    <li>国创</li>
                    <li>综艺</li>
                    <li>动画</li>
                    <li>鬼畜</li>
                    <li>舞蹈</li>
                    <li>娱乐</li>
                    <li>科技</li>
                    <li>美食</li>
                    <li>电影</li>
                    <li>电视剧</li>
                    <li>纪录片</li>
                    <li>游戏</li>
                    <li>音乐</li>
                    <li>影视</li>
                    <li>咨询</li>
                    <li>知识</li>
                    <li>更多</li>
                    <li>影视</li>
                    <li>咨询</li>
                    <li>知识</li>
                    <li>更多</li>
                </ul>
            </div>
            <div class="column-right">
                <div class="line"></div>
                <div class="content">
                    <ul>
                        <li>
                            <img src="摄影.png">
                            <span>专栏</span>
                        </li>
                        <li>
                            <img src="摄影.png">
                            <span>直播</span>
                        </li>
                        <li>
                            <img src="摄影.png">
                            <span>活动</span>
                        </li>
                        <li>
                            <img src="摄影.png">
                            <span>课堂</span>
                        </li>
                        <li>
                            <img src="摄影.png">
                            <span>社区中心</span>
                        </li>
                        <li>
                            <img src="摄影.png">
                            <span>新歌热榜</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

    </div>
</body>
</html>